<!DOCTYPE html>
<html  lang="zh-CN">
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
  <meta content=always name=referrer>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link rel="stylesheet" type="text/css" href="__STATIC__/css/style.css">
  <script src="__STATIC__/js/jquery-1.8.2.js"></script>
  <title>下载</title>
  <style>
    /*清除样式*/
    body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input {
      margin: 0;
      padding: 0;
      font-family:Helvetica;
      font-weight: normal;
    }

    input[type="button"], input[type="submit"], input[type="reset"] {
      -webkit-appearance: none;
      box-shadow: 0 0 0 rgba(0,0,0,0);
      border: none;
      outline: none;
    }

    img {
      border: none;
    }

    ul {
      list-style-type: none;
    }

    a, a:link, a:visited, a:hover, a:active {
      text-decoration: none;
    }

    body {
      max-width: 720px;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content:center;
      overflow: hidden;
      height: 100%;
      width: 100%;
    }


    .wrap {
      width: 100%;
      height: auto;
      overflow: hidden;
      position: relative;
    }
    .main{
      width: 100%;
      height: auto;
      display: block;
    }
    .list_download{
      position: absolute;
      top:56%;
      left:0;
      width: 100%;
    }
    .list_download li{
      width:64%;
      margin: 7% auto 0;
      border:2px solid #6B16C5;
      border-radius: 50px;
      background: #5571F1;
    }
    .list_download li div{
      width: 170px;
      margin: 0px auto;
      color: white;
      overflow: hidden;
      padding: 10px 0;
    }
    .list_download li div a{
      display: block;
    }
    .list_download li span{
      color: white;
      float: left;
      line-height: 24px;
      font-size: 18px;
      margin-left: 10px;
    }
    .list_download .icon{
      height: 22px;
      margin-top: 0px;
      float: left;
    }
    .board {
      width: 100%;
      height: 0px;
      position: absolute;
      background-color: rgba(0, 0, 0, 0.5);
      top: 0px;
      left: 0px;
      z-index: 9;
      overflow: hidden;
    }

    .board1 {
      width: 100%;
      height: 0px;
      position: absolute;
      background: url("__STATIC__/download/img/share.png");
      background-size: 100% 130%;
      top: 0px;
      left: 0px;
      z-index: 9;
      overflow: hidden;
    }

    .shade {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 9999;
      overflow: hidden;
    }

    .shade img {
      width: 100%;
    }
  </style>
  <script>
    $(function () {
      var h=$(window).height();
      $(".list_download li").click(
          function () {
            $(".share").css({height: h+"px"});
            $(".share").css({display:"block"});
            $("body").css({overflowY:"hidden"});
          }
      )
    })
  </script>
</head>
<body>
<div class="wrap">
  <img src="__STATIC__/img2/main.png" class="main">
  <ul class="list_download">
    <li><div><a href="javascript:openApp();"><img src="__STATIC__/img2/icon1.png" class="icon"><span>下载 Android 版</span></a></div></li>
    <li><div><a href="javascript:openApp();"><img src="__STATIC__/img2/icon.png" class="icon"><span>下载 iPhone 版</span></a></div></li>
  </ul>
  <div class="share">
    <img src="__STATIC__/img/share.png">
  </div>
</div>
</body>
<div class="board"></div>
<div class="board1"></div>
<div id="shade" class="shade" style="display: none">
  <img src="__STATIC__/download/img/share.png" alt="">
</div>
<script>
  $(function () {
    var mm = window.screen.height;
    $("#aa").css('height', mm);
  });

  $(".close").click(
      function () {
        $(".share").css({display: "none"})
      }
  );

  function showdiv(targetid) {

    var target = document.getElementById('shade');

    if (target.style.display == "none") {
      target.style.display = "block";
      document.documentElement.ontouchmove = function () {
        return false;
      };
    } else {
      document.documentElement.ontouchmove = function () {
        return true;
      };
      target.style.display = "none";
    }
  }

  function openApp() {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      showdiv(shade);
    } else {
      var u = navigator.userAgent;
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

      // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止js其他行为
      if (isAndroid) {
        var ifr = document.createElement('iframe');
        ifr.src = 'com.lc.distribution://my.app/openwith';//打开app的协议，有app同事提供
        ifr.style.display = 'none';
        document.body.appendChild(ifr);
        console.log(ifr);
        window.setTimeout(function () {
          document.body.removeChild(ifr);
          window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.lc.distribution.project";//打开app下载地址，有app同事提供
        }, 2000)
      } else if (isiOS) {
        var ifr = document.createElement('iframe');
        ifr.src = 'com.longcai.iShop://';//打开app的协议，有app同事提供
        ifr.style.display = 'none';
        document.body.appendChild(ifr);
        console.log(ifr);
        window.setTimeout(function () {
          document.body.removeChild(ifr);
          window.location.href = "https://itunes.apple.com/us/app/ishop用户端/id1254768335?l=zh&ls=1&mt=8";//打开app下载地址，有app同事提供
        }, 2000)
      }
    }
  }
</script>
</html>